
import React, { useState, useEffect } from 'react'

export default function Hooks1() {
    // 声明一个新的叫做 “count” 的 state 变量
    const [count, setCount] = useState(10);

    // 1、 componentDidMount and componentDidUpdate  componentWillUnmount
    /**
     * const [count, setCount] = useState(10);
     * 
     * useEffect(() => {
     *    一些操作  
     *    return {
     *       return 里面可以执行清除副作用 比如清除定时器等
     *    }
     * },[count])
     * 1. 如果数组为空，只会执行一次
     * 2. 如果数组加上count字段，则，只有当count状态值改变时，才会触发执行
     * 如果只传一个参数，每次组件渲染都会执行回调函数（挂载+跟新），相当于 componentDidMount() + componentDidUpdate()
        返回值函数：在组件更新前、组件卸载时执行，相当于 componentWillUnmount() + componentWillUpdate()
     */

    useEffect(() => {
        console.log('count--', count)
        return () => {
            console.log('count--useEffect')
        }
    }, [count])
    function changeCount() {
        setCount(count + 10)
    }

    return (
        <div>
            <h2>我是个人中心</h2>
            <p> count: {count}</p>

            <button onClick={ changeCount } >改变count</button>

        </div>
    )
}
